{% extends "base_lang.html" %}

{% block title %}Privacy Policy - Sprunki Phase 3{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="pt-20 pb-12 md:pt-32 md:pb-20 bg-gradient-to-r from-primary to-secondary">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">{{ _('Privacy Policy') }}</h1>
            <p class="text-xl text-white mb-8">{{ _('How We Protect Your Privacy') }}</p>
        </div>
    </div>
</section>

<!-- Content Section -->
<section class="py-16 bg-white dark:bg-gray-800">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="space-y-8">
            <section>
                <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">{{ _('Information We Collect') }}</h2>
                <p class="text-gray-600 dark:text-gray-300 mb-4">
                    {{ _('We collect information that you provide directly to us, including:') }}
                </p>
                <ul class="list-disc pl-6 space-y-2 text-gray-600 dark:text-gray-300">
                    <li>{{ _('Contact information (name, email address)') }}</li>
                    <li>{{ _('Account credentials') }}</li>
                    <li>{{ _('Profile information') }}</li>
                    <li>{{ _('Usage data and preferences') }}</li>
                </ul>
            </section>

            <section>
                <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">{{ _('How We Use Your Information') }}</h2>
                <p class="text-gray-600 dark:text-gray-300 mb-4">
                    {{ _('We use the information we collect to:') }}
                </p>
                <ul class="list-disc pl-6 space-y-2 text-gray-600 dark:text-gray-300">
                    <li>{{ _('Provide and improve our services') }}</li>
                    <li>{{ _('Communicate with you') }}</li>
                    <li>{{ _('Personalize your experience') }}</li>
                    <li>{{ _('Ensure security and prevent fraud') }}</li>
                </ul>
            </section>
        </div>
    </div>
</section>
{% endblock %}
